<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>WEB KEYBOARD</title>
</head>

<body>
    <main class="keyboard"></main>
    <main class="control_panel"></main>
    <input type="checkbox" id="Viscous" style="display: none;">

    <script>
        const { protocol, origin, href } = location

        let css_href = ''
        let js_href = ''

        if (protocol == 'file:') {
            css_href = href.replace('keyboard.html', 'keyboard.css')
            js_href = href.replace('keyboard.html', 'keyboard.js')

            let link = document.createElement("link")
            link.rel = "stylesheet"
            link.type = "text/css"
            link.href = css_href
            document.head.appendChild(link)
        }
        else if (protocol == 'http:') {
            css_href = origin + '/get_keyboard_css'
            js_href = origin + '/get_keyboard_js'

            fetch(css_href).then(response => {
                return response.text()
            }).then(data => {
                let style = document.createElement("style")
                style.innerHTML = data
                document.head.appendChild(style)
            })
        }

        let script = document.createElement('script')
        script.src = js_href
        document.head.appendChild(script)
    </script>
</body>

</html>